<template>
  <view class="daijia">
	  <view class="" v-if="!info.id">
	  		  <view class="" style="background:rgba(238, 238, 238, 1) ;height: 1rem;">
	  	
	  </view>
   <view class="input" style="height: 17rem;">
      <text>姓名</text>
      <input type="text" v-model="info.name" placeholder="请输入姓名" />
	  <text>手机号</text>
	  <input type="number" v-model="info.mobile" placeholder="请输入手机号" maxlength="11"/>
	  <text>驾龄</text>
	  <input type="number" v-model="info.driving_age" placeholder="请输入驾龄(年)" maxlength="2" />
	  <text>身份证号</text>
	  <input type="idcard" v-model="info.card_id" placeholder="请输入身份证" placeholder-class="input-placeholder" maxlength="18" />
    </view>
    <view class="input" style="border: none;">
       <text>个人照片</text>
       <view class="img">
         <image v-if="!info.image" src="https://www.yandaijia.cn/uploads/static/%E5%88%87%E5%9B%BE%202.png" @tap="uploadImage('image')" mode=""></image>
         <image v-if="info.image" :src="host + info.image" mode="" @click="uploadImage('image')"></image>
       </view>
     </view>
    <view class="input" style="height: 344pt;">
      <text>身份证信息</text>
	  <hr>
      <view class="img">
        <image v-if="!info.card_image" src="https://www.yandaijia.cn/uploads/static/%E5%88%87%E5%9B%BE%202.png" @tap="uploadImage('card_image')" mode=""></image>
        <image v-if="info.card_image" :src="host + info.card_image" @click="uploadImage('card_image')" mode=""></image>
       
	   <!-- <image v-if="!info.card_back_image" src="../../static/sfz2.png" @tap="uploadImage('card_back_image')" mode=""></image>
        <image v-if="info.card_back_image" :src="host + info.card_back_image" @tap="uploadImage('card_back_image')" mode=""></image> -->
      </view>
	 <!-- <view style="text-align: center; width: 100%;">
	 	<text >身份证人面像</text>
	 </view> -->
	  <view class="img">
		  <image v-if="!info.card_back_image" src="https://www.yandaijia.cn/uploads/static/%E5%88%87%E5%9B%BE%202.png" @tap="uploadImage('card_back_image')" mode=""></image>
		   <image v-if="info.card_back_image" :src="host + info.card_back_image" @click="uploadImage('card_back_image')" mode=""></image>
		   
	  </view>
	  
	  
    </view>
    <view class="input jiashi" >
      <text>驾驶证主页</text>
      <view class="img">
        <image v-if="!info.driver_image" src="https://www.yandaijia.cn/uploads/static/%E5%88%87%E5%9B%BE%202.png" @tap="uploadImage('driver_image')" mode=""></image>
        <image v-if="info.driver_image" :src="host + info.driver_image" mode="" @click="uploadImage('driver_image')"></image>
      </view>
    </view>
  
    <button class="button" v-if="!info.id" :style="{'background':color }" @click="post">立即申请</button>
	  </view>
<view class="page" v-if="info.status == '0'">
	  <image src="/static/44@3x.png" class="image_1"></image>
	  <text lines="1" class="text_1">资料审核中，1-2个工作日</text>
	  <view class="text-wrapper_1">
	    <text lines="1" class="text_2">返回</text>
	  </view>
	</view>
		<view class="page" v-if="info.status == '-1'">
			<view class="" style="width: 220rpx;height: 164rpx;margin: 106rpx 0 0 249rpx;">
			<image src="/static/未通过审核@3x.png" style="width: 100%;height: 100%;"></image>	
			</view>
		 
		 <text lines="1" class="text_1">抱歉，您的代驾审核未通过！</text>
		 <text lines="1" class="text_1"style="white-space: pre-wrap">身份证正面上传不清晰，请重新上传！<br> 如有疑问请咨询客服或者致电:&nbsp;010-XXXXXXX</text>
		 <view class="text-wrapper_1">
		   <text lines="1" class="text_2">返回</text>
		 </view>
		</view>
	
    <view v-if="info.status == '0'" class="desc">审核中</view>
    <view v-if="info.status == '-1'" class="desc">审核未通过，请修改信息后重新提交{{ info.remark ? '。审核备注：' + info.remark : '' }}</view>
    <button class="button" v-if="info.status == '-1'"  @click="post">重新提交</button>
  </view>
  
</template>

<script>
import helper from '../../common/helper.js';
import api from '../../common/api.js';
export default {
  data() {
    return {
		color:'#FBDFD1',
		host: helper.host,
		info: {
        card_image: '',
        card_back_image: '',
        driver_image: '',
		driving_age:'',
        image:'',
        mobile:"",
		card_id:"",
      }
    };
  },
  onLoad() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      let res = await api.getApplyInfo();
      if (res.data && res.data.id) {
        this.info = res.data;
      }
    },
    async post() {
      if (!this.info.name) {
        helper.toast('请输入姓名');
        return false;
      }
	  let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
	  if (!reg.test(this.info.mobile)) {
	  	uni.showToast({
	  		icon: 'none',
	  		title: '请输入正确的11位手机号'
	  	})
	  	this.info.mobile = '';
	  	return false;
	  }
	  
		let idreg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      if (!idreg.test(this.info.card_id)) {
      	uni.showToast({
      		icon: 'none',
      		title: '请输入正确的身份证号'
      	})
      	this.info.card_id = '';
      	return false;
      }
	  // let inputType = /[^\d]/g		
	  if (!this.info.driving_age) {
	  	uni.showToast({
	  		icon: 'none',
	  		title: '请输入驾龄，数字即可'
	  	})
	  	this.info.driving_age = '';
	  	return false;
	  }
      if (!this.info.card_image) {
        helper.toast('请上传身份证正面照片');
        return false;
      }
      if (!this.info.card_back_image) {
        helper.toast('请上传身份证背面照片');
        return false;
      }
      if (!this.info.driver_image) {
        helper.toast('请上传驾驶证');
        return false;
      }
      let res = await api.addApply(this.info);
      if (res.code == 1) {
		  console.log(res)
        uni.showModal({
          title: '提示',
          content: res.msg,
          success: res => {
            if (res.confirm) {
				uni.navigateTo({
					url: '/pages/mine/mine'
				});
			  console.log(res)
            }
          }
        });
      } else {
        helper.toast(res.msg);
      }
    },
    removeImage(key) {
      this.info[key] = '';
    },
    uploadImage(key) {
      uni.chooseImage({
        success: async chooseImageRes => {
          let res = await api.upload(chooseImageRes.tempFilePaths[0]);
          if (res.code != 1) {
            helper.toast(res.msg);
            return false;
			 
          }else{
			  this.color="#FE973A"
		  }
          this.info[key] = res.data.url
          helper.toast(res.msg);
        }
      });
    }
  }
};
</script>
<style>
	
	.page {
	     background-color: rgba(255,255,255,1.000000);
	     position: relative;
	     width: 750rpx;
	     height: 1461rpx;
	     overflow: hidden;
	     display: flex;
	     flex-direction: column;
	}
	.image_1 {
		  width: 220rpx;
	      height: 164rpx;
	      margin: 221rpx 0 0 249rpx;
	}
	.text_1 {
	  width: 418rpx;
	  height: 32rpx;
	  overflow-wrap: break-word;
	  color: rgba(170,170,170,1.000000);
	  font-size: 32rpx;
	  font-family: Source Han Sans CN-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  /* line-height: 32rpx; */
	  margin: 54rpx 0 0 192rpx;
	}
	.text-wrapper_1 {
	  background-color: rgba(251,223,209,1.000000);
	  border-radius: 50rpx;
	  height: 98rpx;
	  display: flex;
	  flex-direction: column;
	  width: 710rpx;
	  margin: 800rpx 0 84rpx 20rpx;
	}
	.text_2 {
	  width: 80rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,255,255,1.000000);
	  font-size: 40rpx;
	  font-family: Source Han Sans CN-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin: 32rpx 0 0 316rpx;
	}
</style>
<style lang="scss">
.daijia{
	background:rgba(238, 238, 238, 1) ;
	text-align: center;
	// height: 1041pt;
}	
.desc {
  text-align: center;
  font-size: 26upx;
  color: #dd524d;
  margin-top: 20upx;
  padding: 20upx 5%;
}
.jiashi{
	border-radius:14pt  14pt  14pt  14pt   ;
	margin-top: 10px;
}
.input {
  border-radius: 14pt  14pt  14pt  14pt ;
  margin: 0 auto 1rem;
  width: 85%;
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20upx 5%;
  border-bottom: 1px solid #eeeeee;
  text {
    width: 30%;
	
    font-size: 16px;
    // font-weight: 800;
  }
  input {
    width: 70%;
    font-size: 28upx;
  }
  .input-placeholder {
    font-size: 16px;
  }
  .img {
    width: 100%;
    margin: 10rpx 0 10rpx 0;
    display: flex;
	text-align: center;
	
    image {
	  border-radius: 10pt  10pt  10pt  10pt ;
      width: 90%;
      height: 195px;
      margin-right: 5%;
	  margin-left: 5%;
	  
    }
  }
}
.button {
  color: #FFFFFF ;
  border-radius: 25pt  25pt  25pt  25pt  ;
  background: rgba(251, 223, 209, 1);
  font-size: 28upx;
  width: 90%;
}
</style>
